<template>
    <div :title="title" :class="divClass">
        <template v-if="key2">
            <span class="sat-one-ellipsis" style="padding-bottom: 3px"> {{key1}}</span>
            <span class="sat-one-ellipsis" v-if="!dateString"> {{key2}}</span>
        </template>
        <span v-else class="sat-two-ellipsis">
            {{key1}}
        </span>
    </div>
</template>


<script>
    import dayjs from 'dayjs'

    export default {
        name: "sat-row",
        props: {
            k1: {
                type: String | Number,
                required: true,
            },
            k2: {
                type: String | Number,
            },
            type: {
                type: String,
                required: false,
                default: 'two'
            },
            divClass: {
                type: String,
            },
            dateString: {
                default: false,
            }
        },
        computed: {
            key1() {
                if (this.type === 'two') {
                    return this.k1
                } else if (this.type === 'time') {
                    return this.k1 ? dayjs(this.k1).format('YYYY-MM-DD') : '—'
                } else if (this.type === 'user') {
                    return this.k1 ? this.k1.split('/')[0] : ''
                }
            },
            key2() {
                if (this.type === 'two') {
                    return this.k2
                } else if (this.type === 'time') {
                    return this.k1 ? dayjs(this.k1).format('HH:mm:ss') : ''
                } else if (this.type === 'user') {
                    return this.k1 ? this.k1.split('/')[1] : ''
                }
            },
            title() {
                if( this.dateString ) {
                    return `${this.key1}`
                } else {
                    return `${this.key1} ${this.key2 || ''}`
                }

            }
        }
    }
</script>

<style>
    .sat-one-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .sat-two-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>